<template>
  <div class="view-container">
    <el-row>
      <el-col :span="14">
        <div class="person-list">
          <el-radio-group v-model="curUserId" @change="getWeekDailyLog">
            <el-radio-button :label="item.value" v-for="(item,index) in personList" :key="index">{{item.label}}</el-radio-button>
<!--            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>-->
          </el-radio-group>
<!--          <el-button-group>
            <el-button v-for="(item,index) in personList" :key="index" @click="handlePersonClick(item.value)">{{item.label}}</el-button>
          </el-button-group>-->
        </div>
      </el-col>
      <el-col :span="10">
        <div class="select-wrap">
          <el-select v-model="departmentId" @change="getPersonList">
            <el-option value="" label="请选择"></el-option>
            <el-option v-for="(item,index) in departmentList" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker
            v-model="curWeek"
            @change="change"
            type="week"
            format="yyyy 第 WW 周"
            :picker-options="pickerOptions"
            :clearable="false"
            placeholder="选择周">
          </el-date-picker>
        </div>
      </el-col>
    </el-row>

    <div class="table-container">
      <el-table :data="tableData" border>
        <el-table-column label="日期" prop="date" width="150" align="center"></el-table-column>
        <el-table-column label="日志内容" prop="content"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import dailylogAPI from '@/api/personalOffice/dailylog'
  import userAPI from '@/api/system/user'
  import departmentAPI from '@/api/system/department'
  export default {
    name: 'AllDialyLog',
    data() {
      return {
        departmentId:'',
        departmentList:[],
        curWeek:this._util.formatDateToString(new Date()),
        personList:[],
        tableData:[],
        pickerOptions: {
          firstDayOfWeek: 1
        },
        curUserId:'',
        weekName: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      }
    },
    created() {
      this.getPersonList()
      this.getDepartmentList()
    },
    methods: {
      change(val) {
        this.curWeek = this._util.formatDateToString(val)
        // this.fetchData(this.dailylog.weekDateTime)
        this.getWeekDailyLog()
      },
      getPersonList(){
        userAPI.getUserListByDepartmentId(this.departmentId).then(res=>{
          this.personList = res.result
          if(this.personList.length !== 0){
            this.curUserId = this.personList[0].value
            this.getWeekDailyLog()
          }
        })
      },
      handlePersonClick(id){
        /*this.departmentId = id
        this.getPersonList()*/
        this.curUserId = id
        this.getWeekDailyLog()
      },
      getWeekDailyLog(){
        if(!this.curWeek || !this.curUserId){return}
        dailylogAPI.getListByUserId(this.curWeek,this.curUserId).then(res=>{
          let arr = res.result
          this.tableData = []
          for(let i in arr){
            this.tableData.push({
              date:this.weekName[i],
              content:arr[i].logContent
            })
          }
        })
      },
      getDepartmentList(){
        departmentAPI.getSelectList().then(res=>{
          this.departmentList = res.result
        })
      },
    }
  }
</script>

<style scoped lang="scss">

  .select-wrap,
  .person-list {
    margin-bottom: 20px;
  }
  .select-wrap {
    text-align: right;
  }

</style>
